<script setup>
import Card from '../components/Card.vue';
import { onMounted, reactive, ref, watch, watchEffect } from "vue"
import SelectBlock from '../components/SelectBlock.vue';
import useSearchProjecValue from '../hooks/useSearchProjecValue';
import RecruitCard from '../components/RecruitCard.vue';
import { getRecruitList } from '../api/recruit';
const { orderValue, visibleValue, statusValue, typeValue, OrderOptions, VisibleOptions, statusOption, typeOption } = useSearchProjecValue()

//控制触底刷新与下拉刷新
const refreshing = ref(false)
const finished = ref(false)
const loading = ref(false)
const currentPage = ref(1)
const onRefresh = async () => {
    currentPage.value = 1
    const res = await getData()
    refreshing.value = false
    data.value = res.data
}
const onLoad = () => {
    getData().then(res => {
        currentPage.value++
        if (res.data.length === 0) {
            console.log(11);
            finished.value = true
        } else {
            loading.value = false
            data.value.push(...res.data)
        }
    })
}

onMounted(() => {

})
//获取数据
const data = ref([])
const getData = () => {
    return getRecruitList({
        search: keyWords.value,
        order: orderValue.value,
        visible: visibleValue.value,
        status: statusValue.join(","),
        type: typeValue.join(","),
        page: currentPage.value
    })
}
//搜索栏
const keyWords = ref("")
</script>

<template>
    <div class="search-container">

        <van-sticky :offset-top="60" style="background:var(--main-gradient);border-radius: 10px ; overflow:hidden;margin-top: 20px;">
            <van-search
            background="var(--main-gradient)"
            shape="round"
            v-model="keyWords"
            placeholder="请输入搜索关键词"
            input-align="center"
        />
            <van-dropdown-menu active-color="var(--light-color)">
                <van-dropdown-item title="排序方式" v-model="orderValue" :options="OrderOptions" />
                <van-dropdown-item v-model="visibleValue" :options="VisibleOptions" />
                <van-dropdown-item title="项目状态">
                    <SelectBlock :list="statusOption" v-model:value="statusValue"></SelectBlock>
                </van-dropdown-item>
                <van-dropdown-item title="项目类型">
                    <SelectBlock :list="typeOption" v-model:value="typeValue"></SelectBlock>
                </van-dropdown-item>
            </van-dropdown-menu>
            <van-button @click="onRefresh" color="var(--main-gradient)">确定</van-button>
        </van-sticky>
        <div class="container">
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list
                    name="list"
                    tag="van-list"
                    v-model:loading="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                >
                    <transition-group name="list">
                        <RecruitCard v-for="item, index in data" :data="item" :key="item.pid"></RecruitCard>
                    </transition-group>
                </van-list>
            </van-pull-refresh>
        </div>
    </div>
</template>

<style scoped>
.search-container {
    background-color: var(--main-background-color);
    min-height: 100%;
}
.container {
    margin: 0 auto;
    padding: var(--page-padding);
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
}
.search {
    padding: 20px;
    background-color: rgb(121, 121, 121);
    box-shadow: var(--main-shadow);
}
.filter {
    width: 100%;
}
.van-button {
    width: 100%;
}
.van-pull-refresh {
    overflow: visible;
}
.list-move, /* 对移动中的元素应用的过渡 */
.list-enter-active,
.list-leave-active {
    transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
    opacity: 0;
    transform: translateX(30px);
}

/* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
.list-leave-active {
    position: absolute;
}
</style>